.wrapper {
  z-index: 1;
  display: flex;
  position: relative;
  justify-content: space-between;
  padding-left: calc(var(--mantine-spacing-xl) * 2);
  padding-right: calc(var(--mantine-spacing-xl) * 2);
  background-color: var(--mantine-color-body);

  @media (max-width: $docs-mdx-breakpoint) {
    padding-left: var(--mantine-spacing-xl);
    padding-right: var(--mantine-spacing-xl);
  }
}

.container {
  margin-top: var(--mantine-spacing-xl);
  width: calc(100% - var(--docs-table-of-contents-width));
  max-width: var(--docs-mdx-content-width);
  margin-left: auto;
  margin-right: auto;

  @media (max-width: $docs-mdx-breakpoint) {
    width: 100%;
  }
}

.tableOfContents {
  flex: 0 0 var(--docs-table-of-contents-width);

  @media (max-width: $docs-mdx-breakpoint) {
    display: none;
  }
}
